{% load firecares_tags humanize %}

<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en" ng-app="fireStation"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="Compare your fire department's community risk level with their capacity to respond.">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Search for a Community · FireCARES</title>

    {% include 'firestation/_favicon.html' %}
    {% include "firestation/_firecares_style.html" %}
    {% include 'google_analytics.html' %}
</head>

<body class="ct-headroom--fixedTopBar cssAnimate">

{% include 'firestation/_mobile_navbar.html' %}
{% include "firestation/_navbar.html" %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

<div class="ct-site--map">
    <div class="container">
        <a href="{% url 'firestation_home' %}">Home</a>
        {% block sitemap %}
        <a href="{% url 'firedepartment_list' %}">Search Results</a>
        {% endblock sitemap %}
    </div>
</div>
<section class="search-section">
<div class="container">
<div class="ct-section--products">
<div class="row">
<div class="col-md-4 col-lg-3">
    <div class="ct-js-sidebar">
        <div class="row">
            <div class="col-md-12 hidden-sm hidden-xs">
                <div class="widget">
                    <div class="widget-inner">
                        <div class="search"
                             favorites="{{ request.GET.favorites }}"
                             sort-by="{{ request.GET.sortBy }}"
                             limit="{{ request.GET.limit }}"
                             fdid="{{ request.GET.fdid }}"
                             state="{{ request.GET.state }}"
                             region="{{ request.GET.region }}"
                             sort-fields='{{ sort_by_fields|safe }}'
                             name="{{ request.GET.name }}"
                             population="{{ request.GET.population }}"
                             q="{{ request.GET.q }}"
                             dist-model-score="{{ request.GET.dist_model_score }}">
                            <form class="ct-formSearch--extended ct-u-marginBottom30" role="form" id="searchForm">
                                <div class="ct-form--label--type3">
                                    <div class="ct-u-displayTableVertical">
                                        <div class="ct-u-displayTableCell">
                                            <div class="ct-input-group-btn">
                                                <button class="btn btn-primary pointer-events-none">
                                                    <i class="fa fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="ct-u-displayTableCell text-center">
                                            <span class="text-uppercase">Search for departments</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    {% include 'firestation/_search_form.html' %}
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% block featured_departments %}
            <div class="col-sm-12">
                <div class="widget ct-widget--featuredItems">
                    <div class="widget-inner">
                        <h4 class="text-uppercase">Featured</h4>
                        <div class="hidden-xs hidden-sm">
                            {% for department in featured_departments %}
                            <div class="ct-itemProducts--small ct-itemProducts--small-type1 featured-department-map" style="background-image: url({{ department.thumbnail_no_marker }});">
                                <a href="{{ department.get_absolute_url }}">
                                    <div class="ct-main-content featured-department-transparency" style="">
                                        <label class="featured-department-map-label control-label sale">
                                                {{ department.name }}
                                        </label>
                                    </div>
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="hidden-md hidden-lg">
                            {% for department in featured_departments_short %}
                            <div class="ct-itemProducts--small ct-itemProducts--small-type1 featured-department-map" style="background-image: url({{ department.thumbnail_no_marker }});">
                                <a href="{{ department.get_absolute_url }}">
                                    <div class="ct-main-content featured-department-transparency" style="">
                                        <label class="featured-department-map-label control-label sale">
                                                {{ department.name }}
                                        </label>
                                    </div>
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endblock featured_departments %}
        </div>
    </div>
</div>
<div class="col-md-8 col-lg-9">
{% block sorting_bar %}
<div class="ct-sortingBar ct-u-paddingRight10 ct-u-paddingLeft10 ct-u-marginBottom30">
    <div class="ct-sortingTitle">
        <h4 class="text-uppercase">Search Results<span> ({{ departments_total_count|intcomma }})</span></h4>
    </div>
    <div class="ct-sortingOptions" ng-cloak>
        <ul class="list-inline list-unstyled ct-u-paddingBoth15 pull-right">
            <li>
                <form>
                    {% verbatim %}
                    <ui-select theme="select2" name="sortBy" id="sort-select" ng-model="params.sortBy" ng-change="search()">
                        <ui-select-match placeholder="Sort results">Sort: {{ $select.selected.name  }}</ui-select-match>
                        <ui-select-choices repeat="sort.field as sort in sortFields | orderBy: 'name' | filter: $select.search">
                            <span ng-bind-html="sort.name | highlight: $select.search"></span>
                        </ui-select-choices>
                    </ui-select>
                    {% endverbatim %}
                </form>
            </li>
            <li>
                <form>
                    {% verbatim %}
                    <ui-select theme="select2" name="limitBy" id="limit-select" ng-model="params.limit" ng-change="search()">
                        <ui-select-match placeholder="Page size">Page size</ui-select-match>
                        <ui-select-choices repeat="limit in limits">
                            <span ng-bind-html="limit + ' results per page'"></span>
                        </ui-select-choices>
                    </ui-select>
                    {% endverbatim %}
                </form>
            </li>
        </ul>
        <ul class="ct-showPages list-inline list-unstyled ct-u-paddingBoth15 pull-right">
            <li class="ct-showElements is-active" id="ct-js-showTiles">
                <a href="#">
                    <i class="fa fa-th fa-fw"></i>
                </a>
            </li>
            <li class="ct-showElements" id="ct-js-showList">
                <a href="#">
                    <i class="fa fa-th-list fa-fw"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
{% endblock sorting_bar %}
<div class="row ct-js-search-results ct-showProducts--default">

{% block object_list_view %}
{% for department in object_list %}
    <div class="col-sm-6 col-md-6 col-lg-4">
        {% include "firestation/_fire_department_card.html" %}
    </div>
{% endfor %}
{% endblock object_list_view %}

<div class="clearfix visible-md"></div>
</div>

{% include 'firestation/_pagination.html' %}

</div>
</div>
</div>
</div>
</section>


{% include "firestation/_footer.html" %}

</div>

{% include "firestation/_firecares_scripts.html" %}

<script type="text/javascript">
      $('#sort-select').on("select2-selecting", function(e) {
        window.location.href = e.choice.id;
       });
      $('#limit-select').on("select2-selecting", function(e) {
        window.location.href = e.choice.id;
       });
</script>

</body>
</html>
